
<template>
  <div
    class="comment"
    :class="{
      [`comment-${size}`]:size
    }"
  >
    <a-mentions
      v-model="value"
      :rows="rows"
      placeholder="登录后才能参与评论哦…"
    >
      <a-mentions-option v-for="(item,index) in mentions" :key="index" :value="item.name">
        <div class="m-mention-item">
          <img src="">
          <div>
            <p>{{ item.name }}</p>
            <span>{{ item.dec }}</span>
          </div>
        </div>
      </a-mentions-option>
    </a-mentions>
    <footer>
      <a-checkbox class="noname">
        匿名评论
      </a-checkbox>
      <p class="markdown">
        可用Markdown格式
      </p>
      <div class="btn-wrap">
        <a-button :size="size" type="primary">
          提交
        </a-button>
        <a-button :size="size" type="secondary" @click="previewFn">
          预览
        </a-button>
        <a-button v-if="$listeners.cancel" :size="size" type="primary" @click="cancelFn">
          取消
        </a-button>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    mentions: {
      type: Array,
      required: true
    },
    rows: {
      type: Number,
      default: 3
    },
    size: {
      type: String,
      default: 'large'
    }
  },
  data () {
    return {
      value: ''
    }
  },
  methods: {
    previewFn () {
      this.$emit('preview', this.value)
    },
    cancelFn () {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.comment{
  border-radius: 4px 4px;
  position: relative;
  &.comment-small{
    .ant-mentions{
      padding-bottom: 50px;
    }
    footer{
      height: 49px;
      .markdown{
        font-size: 12px;
      }
      .ant-btn-sm{
        height:28px;
        padding: 0 19px;
      }
    }
  }
  .ant-mentions{
    padding-bottom: 70px;
    border-color: #DCDFE6;
    /deep/textarea{
      line-height: 34px;
    }
    &:hover{
      border-color: #666666;
    }
    &.ant-mentions-focused{
      border-color: #666666;
      box-shadow: none;
    }
  }

  &:active{
    border-color:#666666;
  }
  footer{
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: calc( 100% - 2px );
    height: 69px;
    padding: 0 10px;
    background: #FAFAFA;
    border-radius: 4px;
    .flex(row,flex-start,center);
    .noname{
      flex:1;
    }
    .markdown{
      font-size: 14px;
      line-height: 34px;
      text-align: #333;
      margin:0 26px 0 0;
    }
    .btn-wrap{
      .ant-btn{
        margin-right:14px;
      }
    }
  }

}
</style>
